import React, { useEffect, useRef, useState } from 'react'
import CountUp, { CountUpProps } from 'react-countup'
import SvgIcon from '@/components/SvgIcon'
import styles from './index.module.less'

interface IDataCardProps extends CountUpProps {
  title?: string
  iconName?: string
  iconColor?: string
}

const DataCard: React.FC<IDataCardProps> = props => {
  const [iconBgColor, setIconBgColor] = useState('')
  const [iColor, setIColor] = useState<string>(props.iconColor || '')

  const onMouseEnter = () => {
    setIconBgColor(props.iconColor || '')
    setIColor('white')
  }
  const onMouseLeave = () => {
    setIconBgColor('')
    setIColor(props.iconColor || '')
  }
  return (
    <div className={styles.dataCard_container}>
      <div
        className={styles.icon_container}
        style={{ background: iconBgColor }}
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
      >
        {props.iconName && <SvgIcon name={props.iconName} color={iColor} size='1.3em'></SvgIcon>}
      </div>
      <div>
        <div className={styles.dataCard_title}>{props.title}</div>
        <div className={styles.dataCard_num}>
          <CountUp {...props} />
        </div>
      </div>
    </div>
  )
}

export default DataCard
